<html>
    <head>
        <title>通过 v-once 创建低开销的静态组件</title>
    </head>
    <body>
        <script>
            // 二、通过 v-once 创建"低开销的静态组件"
                                /*
                                    渲染普通的HTML元素在Vue中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。
                                    
                                    在这种情况下，你可以在组件模板中的根元素上使添加 v-once 标签属性 以确保这些内容只计算一次然后缓存起来。

                                    就像这样：
                                */
                                Vue.component('terms-of-service',{
                                            template:`
                                                <div v-once>  此处创建低开销静态组件
                                                    <h1> Terms of Service</h1>
                                                    .... a lot of static content ....
                                                </div>
                                            `
                                });

                                /*
                                    再次强调：
                                        试着不要过度使用这个模式。
                                        当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，
                                        不然它完全是没有必要的----再加上他后期会带来很多困惑。
                                        例如：  设想另一个开发者并不属性 v-once 或者看漏了它在模板中，他们可能会化很多个小时去找出模板为什么无法正确更新！
                                */
        </script>
    </body>
</html>